<template>
    <div id="team">
        <el-row>
            <el-col :span="20" :offset="2">
                <el-row class="team-title">
                    <h3>我们的团队</h3>
                    <p>为了您最佳的资金体验</p>
                </el-row>
                <el-row class="scroll-content">
                    <vue-seamless-scroll :data="teamView" :class-option="optionLeft" class="seamless-warp2">
                        <ul class="item">
                            <li v-for="(item, index) in teamView" :key="index">
                                <img :src="UPLOAD_URL + item" alt="" class="performance-img">
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </el-row>
                <el-row class="member-wrap">
                    <div class="member-item" v-for="(item, index) in team" :key="index">
                        <div class="member-icon">
                            <img :src="UPLOAD_URL + item.avator" alt="">
                        </div>
                        <div class="member-detail">
                            <div class="member-name">{{item.title}}</div>
                            <div class="member-intro">{{item.context}}</div>
                        </div>
                    </div>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="showImage" width="600px" @close="closeDialog" class="dialog" top="50px">
            <img :src="bigImageUrl" alt="" class="big-img">
        </el-dialog>
    </div>
</template>
<script>
import { getTeam, getConfig } from '@/api/api'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    data: function() {
        return {
            team: [],
            teamView: [],
            showImage: false,
            bigImageUrl: ''
        }
    },
    components: {
        vueSeamlessScroll
    },
    computed: {
        optionLeft() {
            return {
                step: 1,
                direction: 2,
                limitMoveNum: 5
            }
        }
    },
    created: function() {
        getTeam({ params: { pageSize: 12 } }).then(res => {
            console.log(res)
            this.team = res.list;
        })
        getConfig('teamView').then(res => {
            this.teamView = JSON.parse(res.teamView).slice(0,22)
        })
    },
    mounted: function() {
        var _this = this;
        function showImg(src) {
            _this.showBigImage(src)
        }
        // 给父层元素绑定事件
        document.querySelector('.scroll-content').addEventListener('click', function(e) {
            // 兼容性处理
            var event = e || window.event;
            var target = event.target || event.srcElement;
            // 判断是否匹配目标元素
            if (target.nodeName.toLocaleLowerCase() === 'img') {
                var src = target.getAttribute('src');
                showImg(src)
            }
        });
    },
    methods: {
        showBigImage: function(url) {
            this.bigImageUrl = url;
            this.showImage = true;
        },
        closeDialog: function() {
            this.showImage = false;
            this.bigImageUrl = '';
        }
    }
}

</script>
<style scoped>
.team-title {
    text-align: center;
}

.team-title h3 {
    font-size: 32px;
    margin: 15px 0;
    font-weight: normal;
}

.team-title p {
    font-size: 18px;
}

.member-wrap {
    overflow: hidden;
    zoom: 1;
}

.member-item {
    width: 50%;
    /*min-height: 240px;*/
    float: left;
    overflow: hidden;
    zoom: 1;
    position: relative;
    margin: 10px 0;
}

.member-icon {
    width: 210px;
    height: 140px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    overflow: hidden;
    transition: all .3s linear;
}

.member-icon img {
    width: 100%;
    height: 100%;
    transition: all .3s linear;
}

.member-item:hover .member-icon {
    transform: translate(0, -55%);
    box-shadow: 0 3px 18px 0 rgba(0, 0, 0, .3);
}

.member-item:hover .member-icon img {
    transform: scale(1.1);
}

.member-detail {
    width: 55%;
    min-height: 140px;
    border: 1px solid #e0e0e0;
    padding: 15px 15px 15px 170px;
    margin-left: 60px;
}

.member-name {
    color: #555;
    display: inline-block;
    padding: 5px 0;
    border-bottom: 2px solid #fd877c;
}

.member-intro {
    color: #555;
    line-height: 1.5;
    margin-top: 10px;
}


.seamless-warp2 {
    overflow: hidden;
    width: 100%;
    /*必须要小于ul的宽度 不然显示有问题*/
    margin: 30px 0;
}

.seamless-warp2 ul.item {
    width: 4620px;
    /*宽度必设，图片张数*图片宽度：limitMoveNum*.performance-img*/
    overflow: hidden;
    zoom: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seamless-warp2 ul li {
    float: left;
    margin: 0 5px;
}

.performance-img {
    width: 200px;
    /*图片宽200*/
    height: 150px;
}

.big-img {
    width: 100%;
}

</style>
